<template>
    <van-dialog v-model:show="show" width="150" :overlay="false" :showConfirmButton="false" >
        <div style="width: 100%;height: 150px; background: #000; display: flex; justify-content: center; align-items: center;">
            <van-loading type="spinner" color="#1989fa" >加载中...</van-loading>
        </div>
    </van-dialog>
    <div class="app-clickcate">
        <div class="clickcate-header">
            <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="$router.back()" fixed/>
        </div>
        <div class="clickcate-content">
            <van-tabs v-model:active="active">
                <van-tab v-for="item in cateList" :key="item.id" :title="item.name">
                    <CateList :data="item" :godslist="categoodslist"   />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getcategoryListApi, getcategoodsListListApi } from '@/api/cate'
import CateList from '@/components/cates/CateList.vue';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { watchEffect } from 'vue';
import { watch } from 'vue';
const cateList = ref<CateNs.IcategoryList[]>([])
const active = ref<number>(0)
const categoodslist = ref<CateNs.IcategoodsList[]>([])
const route = useRoute()
const show =ref<boolean>(true)
const getCateList = async () => {
    let res = await getcategoryListApi()
    cateList.value = res.categoryList
    active.value = cateList.value.findIndex(item => item.name == route.query.name)
    getcateListHandler(cateList.value[active.value]?.id.toString())
}
const getcateListHandler = async (id: string) => {
    let res = await getcategoodsListListApi(id)
    categoodslist.value = res.data
    show.value =false
}
onMounted(() => {
    getCateList()
})
watch(() => active.value, () => {
    show.value = true
    getcateListHandler(cateList.value[active.value]?.id.toString())
})
</script>

<style scoped lang="scss">
.app-clickcate {
    .clickcate-header {
        width: 100%;
        height: 0.45rem;
    }
}
</style>